<template>
  <div class="imgupload">
    <select v-model="imgtype" class="myselect" >
      <option disabled selected>---请选择图片描述类型---</option>
      <option value ="日常生活">日常生活</option>
      <option value ="工作">工作</option>
      <option value="节日">节日</option>
      <option value="趣味">趣味</option>
    </select>
    <form class="mui-input-group">
        <div class="mui-input-row">
            <input type="text" placeholder="标题(仅限20字)" v-model="title" maxlength="20">
        </div>
    </form>
    <quill-editor v-model="content" ref="myquilleditor" :options = "editorOption" class="quilleditor"></quill-editor>
    <imageupload :sorts="imgtype" :imgtitle = "title" @getfilelist = "getfilelist"></imageupload>
    <mt-button type="primary" size="large" @click = "decideupload">确定</mt-button>
    <mt-button type="danger" size="large">取消</mt-button>
    
  </div>
</template>
<script>
import imageupload from "../mycomponents/imageupload.vue"
const toolbaroptopn = [
    ['bold','underline','italic','strike'],
    ['blockquote','code-block'],
    [{header:1},{header:2}],
    [{list:'ordered',list:'bullet'}],
    [{script:'sub'},{script:'super'}],
    [{indent:"+1"},{indent:"-1"}],
    [{direction:'rtl'}],
    [{size:['small',false,'large','huge']}],
    [{color:[]},{background:[]}],
    [{align:[]}],
]
function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}
export default {
  data() {
    return {
      title:"",
      content:"", 
      waitupload:[],
      editorOption:{
        modules:{
          toolbar:toolbaroptopn
        }
      },
      imgtype:"123",
      imguploadlist:[]
    };
  },
  methods: {
    getfilelist(list){
      this.imguploadlist = [];
      list.forEach((item)=>{
        this.imguploadlist.push(item.file)
      })
    },
    imglistupload(list){
      return new Promise((res,rej)=>{
        var format = new FormData();
        for(var i = 0;i<list.length;i++){
          format.append('imgs',list[i])
        }
        this.$http.post("imgsupload",format).then((result)=>{
          res(result.body);
        })
      })
    },
    decideupload(){
      this.imglistupload(this.imguploadlist).then((data)=>{
          if(this.imgtype == "" || this.title == "" || this.content == ""){
            alert("类型或标题或描述信息未填写!");
            return;
          }else{
            var content = this.content;
            this.$http.post("txtupload",{content}).then((textdata)=>{
              var obj = {};
              obj.id = textdata.body.message[0].id;
              obj.type = this.imgtype;
              obj.title = this.title;
              obj.img = JSON.stringify(data);
              obj.txt = textdata.body.message[0].name;
              obj.time = this.$moment(new Date()).format('YYYY/MM/DD HH:mm:ss');
              this.$http.post("uploadsqlimginfo",obj).then((result)=>{
                if(result.body.status == 0){
                  alert("上传成功"); 
                  this.imgtype = "";            
                }
              },(err)=>{
                if(err.body.status == 1){
                  alert("上传失败");                
                }
              })
            })
          }
      })  
    }
  },
  components:{
    imageupload
  }
};
</script>
<style lang = 'less'>
  
  .imgupload{
    .mui-input-group{
      margin-bottom: 5px;
      input{
          font-size: 12px;
          padding: 4px 8px !important;
      }
    }
    .mui-input-group .mui-input-row {
        height: none !important;
    }
    .quilleditor{
        min-height: 200px;
        display: flex;
        flex-direction: column;
    }
    .ql-container.ql-snow{
        flex: 1;
    }
    .ql-toolbar.ql-snow .ql-formats {
        margin-right: 0px;
    }
    .ql-snow .ql-picker.ql-size {
        width: 70px;
    }
    .myselect{
      margin-bottom: 5px;
      border: 1px dashed #f03b3b !important;
      padding: 4px 6px;
      text-align: center;
      text-align-last: center;
      text-align: center;
      >option{
        font-size: 12px;
      }
    }
    padding: 1%;
    .ant-upload-list-picture-card .ant-upload-list-item{
      width: 100%;
      height: 50%;
      padding: 5px;
    }
    .ant-upload-list-picture .ant-upload-list-item-error, .ant-upload-list-picture-card .ant-upload-list-item-error {
      border-color: #e76e74;
    }
    .ant-upload-list{
      display: flex;
      flex-direction: row;
      align-items: baseline;
      flex-wrap: wrap;
      >div{
        float: none;
        width: 22%;
        height: 100%;
        margin-right: 1% !important;
        >span{
          >div{
            width: 100%;
            height: 50%;
            padding: 5px;
          }
        }
      }
      >div:first-of-type{
        width: 30%;
        height: 100%;
      }
    }
    div{
      margin: 0!important;
    }
    .ant-upload.ant-upload-select-picture-card{
      margin-top: 5px!important;
      width: 100%;
      height: 0;
    }
    .mint-button{
      margin-top: 5px!important;
    }
    label{
      margin: 0;
    }
  }
</style>
